<template>
  <div>
    <div class="search-box">
      <el-date-picker
        v-model="datePicker"
        class="search-item"
        clearable
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="searchQuery.yljgbm"
        class="search-item"
        clearable
        placeholder="请选择医院"
      >
        <el-option v-for="(item,index) in personalInstitutInfoList" :key="`yljgbm_${index}`" :label="item.yljgmc" :value="item.yljgbm" />
      </el-select>
      <el-select
        v-model="searchQuery.jzlx"
        class="search-item"
        clearable
        placeholder="请选择就诊类型"
      >
        <el-option label="门诊" value="门诊" />
        <el-option label="住院" value="住院" />
      </el-select>
      <el-select
        v-model="searchQuery.jzwd"
        class="search-item"
        clearable
        placeholder="请选择查询维度"
      >
        <el-option label="就诊" value="就诊" />
        <el-option label="检查" value="检查" />
        <el-option label="检验" value="检验" />
      </el-select>
      <el-button type="primary" class="search-item" @click="handleSearch">搜 索</el-button>
    </div>
    <div class="patient-details">
      <div class="left">
        <patient-info />
        <info-tabs :time-line-data="timeLineData" @handleTimeline="handleTimeline" />
      </div>
      <div class="right">
        <right-header />
        <right-content :time-line-item="timeLineItem" :search-query="searchQuery" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonalInstitutInfoList, getPatientVisitInfoTimeLine } from '@/api/patientDetails'
import patientInfo from './components/patientInfo'
import infoTabs from './components/infoTabs'
import rightHeader from './components/rightHeader'
import rightContent from './components/rightContent'
import store from '@/store'

export default {
  name: 'PatientDetails',
  components: {
    patientInfo,
    infoTabs,
    rightHeader,
    rightContent
  },
  data() {
    return {
      datePicker: [],
      searchQuery: {
        beginTime: '',
        endTime: '',
        yljgbm: '',
        jzlx: '',
        jzwd: '就诊'
      },
      timeLineData: [],
      timeLineItem: {},
      personalInstitutInfoList: []
    }
  },
  computed: {
    idCard() {
      return this.$store.getters.userInfo.zjhm
    }
  },
  watch: {
    datePicker: {
      handler(val) {
        if (val) {
          this.searchQuery.beginTime = val[0]
          this.searchQuery.endTime = val[1]
        } else {
          this.searchQuery.beginTime = ''
          this.searchQuery.endTime = ''
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.$route.query.freeLogin === '1') {
      const { freeLogin, name, idCard, phone } = this.$route.query
      const loginForm = { freeLogin, name, idCard, phone }
      this.$store.dispatch('LoginByUsernamePatientDetails', loginForm).then(() => {
        store.dispatch('GetUserInfo').then(res => {
          this.pageInfo()
        }).catch(error => {
          this.$notify.error({
            title: '用户信息获取失败',
            message: error.msg
          })
        })
      }).catch(error => {
        this.$notify.error({
          title: '获取token失败',
          message: error.msg
        })
      })
    } else {
      this.pageInfo()
    }
  },
  destroyed() {
    this.loadingModelObj ? this.loadingModelObj.close() : null
  },
  methods: {
    pageInfo() {
      if (this.idCard) {
        this.getPersonalInstitutInfoList({
          zjhm: this.idCard
        })
        this.getPatientVisitInfoTimeLine({
          zjhm: this.idCard,
          ...this.searchQuery
        })
      }
    },
    handleSearch() {
      this.getPatientVisitInfoTimeLine({
        zjhm: this.idCard,
        ...this.searchQuery
      })
    },
    getPersonalInstitutInfoList(params) {
      getPersonalInstitutInfoList(params).then((res) => {
        const { data } = res
        const { list = [] } = data
        this.personalInstitutInfoList = list
      }).catch(() => {})
    },
    getPatientVisitInfoTimeLine(params) {
      this.loadingModel('正在查询数据...')
      getPatientVisitInfoTimeLine(params).then((res) => {
        const { data } = res
        this.timeLineData = data
        if (data.length > 0) {
          this.timeLineItem = data[0]
        }
        this.loadingModelObj.close()
      }).catch(() => {
        this.loadingModelObj.close()
      })
    },
    handleTimeline(row) {
      this.timeLineItem = row
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.search-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding:11px;
  .search-item{
    margin-left:15px;
  }
}
.patient-details {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: calc(100vh - 50px - 50px);
  background: #f1f1f1;
  .left{
    flex-shrink: 0;
    width: 265px;
    margin-right: 10px;
    padding-left: 12px;
    border-top-right-radius: 12px;
    background: #fff;
  }
  .right{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
